import React, { Component } from 'react';
import { routerRedux, Route, Switch } from 'dva/router';

import Debounce from 'lodash-decorators/debounce';
import Bind from 'lodash-decorators/bind';
import { connect } from 'dva';
import {
    Icon,
    Row,
    Col,
    Steps,
    Card,
    Avatar,
    Input,
    Form,
    Spin,
    Table,
    Divider,
    List
} from 'antd';
import classNames from 'classnames';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import DescriptionList from '../../components/DescriptionList';
import styles from './style.less';
import Trend from '../../components/Trend';
import Ellipsis from '../../components/Ellipsis';
import chushai from '../../assets/chushai.png';
import chushen from '../../assets/chushen.png';
import fangkuan from '../../assets/fangkuan.png';
import faqi from '../../assets/faqi.png';
import fushen from '../../assets/fushen.png';
import jiafang from '../../assets/jiafang.png';
import qianyue from '../../assets/qianyue.png';
import tiche from '../../assets/tiche.png';
import ticheshen from '../../assets/ticheshen.png';
import buchong from '../../assets/buchong.png';
import zhixing from '../../assets/zhixing.png';
import src from '../..';
//
const FormItem = Form.Item;
const TextArea = Input.TextArea;
const { Description } = DescriptionList;

const getWindowWidth = () => (window.innerWidth || document.documentElement.clientWidth);

export let profileState = false;

@connect(({ home }) => ({
    home
}))
// @Form.create()
export default class HomePage extends Component {
    state = {
        dataList: []
    }

    componentDidMount() {
        const { dispatch } = this.props;
        dispatch({
            type: 'home/fetch',
        });
        this.props.dispatch({
            type: 'global/fetchNotices',
        });
    }

    handlePendingTask = () => {
        this.props.dispatch(routerRedux.push('/review/pending-task'));
    }
    handleCompletedTask = () => {
        this.props.dispatch(routerRedux.push('/review/completed-task'));
    }

    columns = [{
        title: '排名',
        dataIndex: 'ranking',
        key: 'ranking',
    }, {
        title: '名称',
        dataIndex: 'name',
        key: 'name',
    }, {
        title: '业务量',
        dataIndex: 'business',
        key: 'business',
    }, {
        title: '同期比',
        dataIndex: 'proportion',
        key: 'proportion',
        render: (text, record) => (
            <Trend flag={record.status === 1 ? 'down' : 'up'}>
                <span style={{ marginRight: 4 }}>10%</span>
            </Trend>
        ),
        align: 'center',
    }];

    data = [{
        key: '1',
        ranking: '1',
        name: '苏州',
        business: '1122',
        proportion: '15%',
    }, {
        key: '2',
        ranking: '2',
        name: '南昌',
        business: '1122',
        proportion: '15%',
    }, {
        key: '3',
        ranking: '3',
        name: '北京',
        business: '1122',
        proportion: '15%',
    }, {
        key: '4',
        ranking: '4',
        name: '长沙',
        business: '1122',
        proportion: '15%',
    }, {
        key: '5',
        ranking: '5',
        name: '拉萨',
        business: '1122',
        proportion: '15%',
    }];

    handleHomePageListItem = (item) => {
        const { dispatch } = this.props;
        switch (item.code) {
            case 'faqi':
                dispatch(routerRedux.push('/apply/createApplyList'))
                break;
            case 'chushai':
                dispatch(routerRedux.push('/risk/preCheckList'))
                break;
            case 'zhixing':
                dispatch(routerRedux.push('/apply/operateList'))
                break;
            case 'buchong':
                dispatch(routerRedux.push('/apply/businessSupplementList'))
                break;
            case 'jiafang':
                dispatch(routerRedux.push('/risk/homeVisitList'))
                break;
            case 'chushen':
                dispatch(routerRedux.push('/risk/checkList'))
                break;
            case 'fushen':
                dispatch(routerRedux.push('/risk/reviewList'))
                break;
            case 'qianyue':
                dispatch(routerRedux.push('/apply/signContractList'))
                break;
            case 'fangkuan':
                dispatch(routerRedux.push('/apply/cashOutList'))
                break;
            case 'tiche':
                dispatch(routerRedux.push('/apply/pickCarEditorList'))
                break;
            case 'ticheshen':
                dispatch(routerRedux.push('/risk/pickCarList'))
                break;
        }
    }

    handleChangeImg = (item) => {
        switch (item.code) {
            case 'faqi':
                return faqi
            case 'chushai':
                return chushai
            case 'zhixing':
                return zhixing
            case 'buchong':
                return buchong
            case 'jiafang':
                return jiafang
            case 'chushen':
                return chushen
            case 'fushen':
                return fushen
            case 'qianyue':
                return qianyue
            case 'fangkuan':
                return fangkuan
            case 'tiche':
                return tiche
            case 'ticheshen':
                return ticheshen
        }
    }

    render() {
        const { home: { list, loading } } = this.props;

        return (
            <PageHeaderLayout
                title="首页"
            >
                {/* {JSON.stringify(list)} */}
                {loading ?
                    <div className={styles.spinContainer}>
                        <Spin size="large" />
                    </div>
                    :
                    list &&
                    <Card>
                        <div className={styles.cardList}>
                            <List
                                key={"code"}
                                size='small'
                                grid={{ gutter: 24, xxl: 6, xl: 4, lg: 3, md: 2, sm: 2, xs: 1 }}
                                dataSource={list}
                                renderItem={item => (
                                    <List.Item key={item.code} >
                                        <Card
                                            hoverable
                                            className={styles.card}
                                            style={{ textAlign: 'center' }}
                                            onClick={() => this.handleHomePageListItem(item)}>
                                            <Card.Meta
                                                avatar={<img alt="" className={styles.cardAvatar} style={{ width: '60px', height: '60px' }} src={this.handleChangeImg(item)} />}
                                                title={<span style={{ fontSize: '14px' }}>{item.name}</span>}
                                                description={(
                                                    <Ellipsis style={{ fontSize: '24PX' }} lines={1}>{item.active}</Ellipsis>
                                                )}
                                            />
                                        </Card>
                                    </List.Item>
                                )}
                            />
                        </div>
                    </Card>
                }
                {/* 
                本段以下代码不要删，后期有用
                <Card style={{ marginTop: 24 }}>
                    <Row>
                        <Col sm={11} xs={24} style={{ marginRight: 72, marginLeft: 0 }}>
                            <Table
                                columns={this.columns}
                                dataSource={this.data}
                                title={() => '本月各分公司业务排行'}
                            />
                        </Col>
                        <Col sm={11} xs={24} style={{ marginBottom: 0 }}>
                            <Table
                                columns={this.columns}
                                dataSource={this.data}
                                title={() => '本月业绩排行'}
                            />
                        </Col>
                    </Row>
                </Card> */}
            </PageHeaderLayout>
        );
    }
}